<template>
  <div class="rightTop" style="width: 6rem;height: 3rem">
<!--    备注图片-->
    <img :src="imgurl" id="rtRemark" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
<!--    备注内容-->
    <div v-show="seen" id="r1cont" style="position: fixed;z-index: 9999999;">
      <div style="margin-top: 0.2rem;margin-left: 0.2rem;margin-right: 0.2rem">
        <li>字体越大代表该模块bug越多</li>
      </div>
    </div>
    <div>
<!--      标题-->
      <p>Bug原因</p>
<!--      词云-->
      <wordcloud :data="defaultWords" nameKey="name" valueKey="value" :color="myColors" :fontSize="fontSize"
                 :showTooltip="false" style="width: 6rem;height: 2.75rem"></wordcloud>
    </div>
  </div>
</template>
<script>
import wordcloud from 'vue-wordcloud'
import img from '../assets/remark.png'


export default {
  name: 'rightTop',
  components: {
    wordcloud
  },
  mounted() {
    this.getdata();
  },
  methods: {
    // 请求bug分布模块
    getdata() {
      this.$http({
        method: 'get',
        url: 'show/key_word/?system=' + this.$route.query.project,
      }).then(response => {
        console.log(response.data);
        var data = []
        for (var name in response.data) {
          if (data.length<20) {
            data.push({
              name: name,
              value: Math.sqrt(response.data[name])
            })
          }
        }
        this.defaultWords = data
          },
      );
    },
    // 鼠标放置操作
    onMouseOver() {
      this.seen=true
    },
    // 鼠标离开操作
    onMouseOut() {
      this.seen=false
    },
    },
    data() {
      return {
        // 用于备注
        imgurl:img,
        seen:false,
        // 词云字体大小分布区间
        fontSize:[this.refontSize(10),this.refontSize(30)],
        // 词云颜色
        myColors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
        // 词云数据
        defaultWords: []
      }
    },
}
</script>

<style lang="scss" scoped>
.rightTop{
  p{
    font-size: 0.235rem;
    font-weight: bolder;
    color: #CCFFFF;
  }
  #rtRemark{
    //float: right;
    position: fixed;
    z-index: 99999999;
    //padding-top: 1rem;
    margin-left: 5.2rem;
    width: 0.3rem;
    height: 0.3rem;
  }
  #r1cont{
    width: 3.5rem;
    height: .5rem;
    //background-color:#171823;
    margin-top: 0.4rem;
    margin-left: 2rem;
    color:#CCFFFF;
    //box-shadow: #5f5f5f;
    background: rgba(64,64,64,.5);
    //li{ line-height:0.35rem}
    li:before {
      content: "";
      width: 0.1rem;
      height: 0.1rem;
      display: inline-block;
      border-radius: 50%;
      background: #4F8EFF;
      vertical-align: middle;
      margin-right: 0.08rem;
    }
  }
}
</style>